<template>
  <div class="info">
    <div class="info-left">
      <div
        class="info-left-box"
        v-for="(item, index) in left"
        @click="handelClick(item)"
        :key="index"
      >
        <transition
          tag="ul"
          v-bind:css="false"
          v-on:before-enter="beforeEnterGroup"
          v-on:leave="leaveGroup"
        >
        <div>
           <img
              v-if="item.show"
              :src="item.isaction ? item.actionImgs : item.imgs"
              alt=""
            />
            <p>{{ item.name }}</p>
        </div>
           
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      left: [
        {
          imgs: require("../assets/left1.png"),
          actionImgs: require("../assets/right1.png"),
          isaction: false,
          show: true,
          name: "航 班",
        },
        {
          imgs: require("../assets/left2.png"),
          show: true,
          actionImgs: require("../assets/right2.png"),
          isaction: false,
          name: "调 度",
        },
        {
          imgs: require("../assets/left3.png"),
          show: true,
          actionImgs: require("../assets/right3.png"),
          isaction: false,
          name: "物 流",
        },
        {
          imgs: require("../assets/left4.png"),
          show: true,
          actionImgs: require("../assets/right4.png"),
          isaction: false,
          name: "停车场",
        },
        {
          imgs: require("../assets/left5.png"),
          show: true,
          actionImgs: require("../assets/right5.png"),
          isaction: false,
          name: "人 流",
        },
        {
          imgs: require("../assets/left6.png"),
          show: true,
          actionImgs: require("../assets/right6.png"),
          isaction: false,
          name: "服 物",
        },
        {
          imgs: require("../assets/left7.png"),
          show: true,
          actionImgs: require("../assets/right7.png"),
          isaction: false,
          name: "安 全",
        },
        {
          imgs: require("../assets/left8.png"),
          show: true,
          actionImgs: require("../assets/right8.png"),
          isaction: false,
          name: "照 明",
        },
        {
          imgs: require("../assets/left9.png"),
          show: true,
          actionImgs: require("../assets/right9.png"),
          isaction: false,
          name: "能 源",
        },
      ],
    };
  },
  methods: {
    handelClick(item) {
      this.left.forEach((element) => {
        if (element.imgs == item.imgs) {
          element.isaction = true;
        } else {
          element.isaction = false;
        }
      });
      item.show = false;
      setTimeout(() => {
        item.show = true;
      }, 300);
    },
  },
};
</script>
<style scoped>
.info {
  background: #040c12;
  display: flex;
  align-items: center;
}
.info-left {
  padding-left: 26px;
}
.info-left > div:first-child {
  margin-top: 0;
}
.info-left-box { 
  margin: 40px 0;
  height: 58px;
}
.info-left-box >div{
  display: flex;
  align-items: center;
  
}
.info-left-box  p {
  background: #1c2428;
  color: white;
  padding: 6px 20px;
  font-size: 14px;
  border-radius: 5px;
  margin-left: 13px;
  white-space: nowrap;
}
</style>
